<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <a-col :span="24">
        <a-card title="详情">
          <template #extra>
            <a-button type="primary" class="ml-5" @click="edit()">编辑</a-button>
          </template>
          <a-row>
            <a-col :span="4">
              <a-avatar :size="64" :src="formState.stuInfo.headUrl"></a-avatar>
            </a-col>
            <a-col :span="20">
              <a-row>
                <a-col :span="8">
                  <a-form-item>姓名：{{formState.stuInfo.name}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>来自大学：{{formState.stuInfo.comeSchName}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>微信昵称:{{formState.stuInfo.wxNickname}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>Light ID：{{formState.stuInfo.lightId}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>渠道来源：{{formState.stuInfo.channelSources}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>渠道负责人：{{formState.stuInfo.channelPersonName}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>可提现余额：{{formState.stuInfo.cashBalance}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>不可提现余额：{{formState.stuInfo.noCashBalance}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>意向程度：{{formState.stuInfo.intention}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>销售负责人：{{formState.stuInfo.salePersonName}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>创建人：{{formState.stuInfo.createBy}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>创建时间：{{formState.stuInfo.createTime}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>备注：{{formState.stuInfo.remark}}</a-form-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-tabs v-model:activeKey="activeKey" style="width: 100%">
        <a-tab-pane key="1" tab="基础信息">
          <a-col :span="24">
            <div class="pre-title">基础信息</div>
            <a-card>
              <a-row>
                <a-col :span="8">
                  <a-form-item>姓氏:{{formState.stuInfo.surName}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>名字:{{formState.stuInfo.title}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>中间名:{{formState.stuInfo.middleName}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>性别:{{formState.stuInfo.sex}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>出生日期:{{formState.stuInfo.births}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>个人邮箱:{{formState.stuInfo.mailbox}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>常用电话:{{formState.stuInfo.phone}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>签证类型:{{formState.stuInfo.visaType}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>证件类型:{{formState.stuInfo.certificatesType}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>证件号:{{formState.stuInfo.certificatesNo}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>出生城市:{{formState.stuInfo.cityOfBirths}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>出生国家:{{formState.stuInfo.countryOfBirths}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>目前所在地:{{formState.stuInfo.currentCityOrCountrys}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>国籍:{{formState.stuInfo.nationality}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>永久居住地址:{{formState.stuInfo.addres}}</a-form-item>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
          <a-col :span="24">
            <div class="pre-title">紧急联系人</div>
            <a-card>
              <a-row v-for="(item, index) in formState.contacts" :key="index">
                <a-col :span="6">
                  <a-form-item>姓名:{{item.name}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>关系:{{item.relation}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>电话:{{item.phone}}</a-form-item>
                </a-col>
              </a-row>
              <div style="width:100%;text-align:center;padding: 15px 0;">暂无紧急联系人</div>
            </a-card>
          </a-col>
          <a-col :span="24">
            <div class="pre-title">教育背景</div>
            <a-card>
              <a-row>
                <a-col :span="6">
                  <a-form-item>来自大学:{{formState.stuInfo.comeSchName}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>大学入学时间:{{formState.stuInfo.universityAdmissionTimes}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>大学毕业时间:{{formState.stuInfo.hschluniversityGraduationTimesName}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>大学毕业学位:{{formState.stuInfo.universityGraduationDegree}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>大学就读专业:{{formState.stuInfo.universityMajor}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>大学目前GPA:{{formState.stuInfo.universityGpa}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>来自高中:{{formState.stuInfo.highSchools}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>高中毕业时间:{{formState.stuInfo.highGraduationTimes}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>高中所在国家:{{formState.stuInfo.highCountrys}}</a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item>高中所在城市:{{formState.stuInfo.highCity}}</a-form-item>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
          <a-col :span="24">
            <div class="pre-title">文件夹</div>
            <a-card>
              <a-row>
                <a-col :span="6">
                  <a-form-item label="成绩单">
                    <div class="file-list">
                      <a
                        v-for="item in formState.files.filter(item => item.type == 1)"
                        :key="item.id"
                        class="mt-10"
                        :href="item.url"
                      >
                        {{ item.name }}
                      </a>
                    </div>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="护照">
                    <div class="file-list">
                      <a
                        v-for="item in formState.files.filter(item => item.type == 2)"
                        :key="item.id"
                        class="mt-10"
                        :href="item.url"
                      >
                        {{ item.name }}
                      </a>
                    </div>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="其他">
                    <div class="file-list">
                      <a
                        v-for="item in formState.files.filter(item => item.type == 3)"
                        :key="item.id"
                        class="mt-10"
                        :href="item.url"
                      >
                        {{ item.name }}
                      </a>
                    </div>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
          </a-tab-pane>
        <a-tab-pane key="2" tab="跟进进度">
          <DetailCreateBy v-if="activeKey == 2" :params="formState.stuInfo"></DetailCreateBy>
        </a-tab-pane>
        <a-tab-pane key="3" tab="Light历史就读信息">
          <LightId v-if="activeKey == 3" :params="formState.stuInfo"></LightId>
        </a-tab-pane>
        <a-tab-pane key="4" tab="项目学校学籍信息">
          <ProjectDetail v-if="activeKey == 4" :params="formState.stuInfo"></ProjectDetail>
        </a-tab-pane>
      </a-tabs>
    </a-row>
  </page-layout>
</template>
<script>
  import {
    defineComponent,
    reactive,
    toRaw,
    createVNode,
    onMounted,
    ref,
    onActivated
  } from "vue";
  import {
    useRoute,
    useRouter
  } from 'vue-router';
  import {
    selectById
  } from "@/api/module/student/student-bop-manage";
  import {
    message
  } from 'ant-design-vue';
  import moment from 'moment'
  import {
    getDictByCodesReturnObj
  } from '@/tools/get-dict'
  import {
    isEmpty
  } from '@/tools/common'
  import dictEnum from "@/const/dict"
  import DetailCreateBy from './detail-create-by.vue'
  import LightId from './light-detail.vue'
  import ProjectDetail from './project-detail.vue'
  export default {
    name: "student-bop-manage-detail",
    components: {
      DetailCreateBy,
      LightId,
      ProjectDetail
    },
    setup() {
      const router = useRouter();
      const route = useRoute();
      const activeKey = ref('1')
      const formState = reactive({
        stuInfo: {
          headUrl: ''
        },
        contacts: [],
        files: []
      })
      const baseFields = reactive({
        dict: {}
      })
      const getDataByDict = (data, dictKey) => {
        if (isEmpty(data)) return '-'
        const item = baseFields.dict[dictKey].find(v => v.value == data)
        if (isEmpty(item)) return '-'
        return item.label
      }
      onActivated(async () => {
        baseFields.dict = await getDictByCodesReturnObj([
          dictEnum.DEGREE_INTENTION,
          dictEnum.SEX,
          dictEnum.DOCUMENT_TYPE,
          dictEnum.VISA_TYPE,
          dictEnum.GRADUATION_DEGREE,
          dictEnum.COURSE_STATUS,
          dictEnum.EMG_CONTACT,
          dictEnum.ENG_LEVEL,
          dictEnum.INTENTIONPROJECT,
          dictEnum.CHANNEL_SOURCE, // 渠道来源
        ])
        let res = await selectById({
          id: route.query.id
        })
        if (res.code == 500) return message.warning(res.msg)
        res.data.stuInfo.births = checkdate(res.data.stuInfo.births);
        res.data.stuInfo.universityAdmissionTimes = checkdate(res.data.stuInfo.universityAdmissionTimes);
        res.data.stuInfo.universityGraduationTimes = checkdate(res.data.stuInfo.universityGraduationTimes);
        res.data.stuInfo.highGraduationTimes = checkdate(res.data.stuInfo.highGraduationTimes);
        res.data.contacts.map(item => {
          item.relation = getDataByDict(item.relation, dictEnum.EMG_CONTACT)
        })
        res.data.stuInfo.universityGraduationDegree = getDataByDict(res.data.stuInfo.universityGraduationDegree, dictEnum.GRADUATION_DEGREE)
        res.data.stuInfo.channelSources = getDataByDict(res.data.stuInfo.channelSources, dictEnum.CHANNEL_SOURCE)
        res.data.stuInfo.intention = getDataByDict(res.data.stuInfo.intention, dictEnum.DEGREE_INTENTION)
        res.data.stuInfo.sex = getDataByDict(res.data.stuInfo.sex, dictEnum.SEX)
        res.data.stuInfo.certificatesType = getDataByDict(res.data.stuInfo.certificatesType, dictEnum.DOCUMENT_TYPE)
        res.data.stuInfo.visaType = getDataByDict(res.data.stuInfo.visaType, dictEnum.VISA_TYPE)
        formState.stuInfo = {
          ...res.data.stuInfo,
          ...res.data.balance
        };
        formState.contacts = res.data.contacts;
        formState.files = res.data.files;
      })
      const checkdate = (data) =>{
        if (isNaN(Number(data))) return data
        if(data==null){
          return ''
        }else{
          return moment(data).format('YYYY-MM-DD')
        }
      }
      const edit = () => {
        router.push({
          path: '/studentrtv/student-bop-manage/add',
          query: {
            id: route.query.id
          }
        })
      }
      return {
        activeKey,
        edit,
        formState,
      }
    }
  }
</script>
<style scoped>
  .ant-form-item {
    margin-bottom: 0x;
    margin: 10px 0;
  }

  .pre-title {
    padding: 10px 25px;
    background-color: #f5f5f5;
    color: #555;
  }
  .file-list {
    display: flex;
    flex-direction: column;
  }
</style>
